<template>
    <div class="markdown">
        <div class="div">
            <h3>markdown</h3>
            <div class="md md-write">
                <textarea class="info" v-model="markdown" @blur.prevent="sendData"></textarea>
            </div>
        </div>
        <div class="div">
            <h3>Preview</h3>
            <div class="md md-preview"
                :key="markdown"
                v-markdown>
                {{markdown}}
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"markdown",
    // 从AddBlog接收浏览器上输入的博客内容
    props:{
        markdown:{
            type:String,
            // default:''
        }
    },
    data(){
        return {
            markdown:''
        }
    },

    methods:{
        // 向父级AddBlog传递博客内容
        sendData(){
            this.$emit("sendToAddblog",this.markdown);
        }
    }
}
</script>

<style>
/* 整个markdown页面 */
.markdown{
    height:450px;
    display:grid;
    grid-template-columns: 1fr 1fr;
}
/* markdown左右两个容器：书写和预览 */
.div{
    border:2px solid #2196f3;
    height:100%;
    background: rgb(209, 224, 220);
}
/* markdown左右两个容器的标题 */
h3{ 
    height: 20px;
    margin:5px 0px 10px;
}
/* markdown左右两个容器的内容 */
.md{
    border-top: 2px dashed #2196f3;
    width:100%;
    height: 91%;
    /* textarea文本框和div容器设置固定高度后，超出后自动出现滚动条 */
    overflow-y: auto;
    margin-bottom:0px;
}
/* textarea文本框 */
.info{
    /* margin-bottom:-11px; */
    padding:0px;
    margin-bottom: -11px;
    width:100%;
    height:100%;
    /* 防止拖拽文本域 */
    resize:none;
    /* 轮廓线消失 */
    outline:none;
    /* 隐藏边框 */
    border:0;
    font-size:18px;
}

/* 预览容器 */
.md-preview{
    height:400px;
    text-align: left;
    background: rgb(209, 224, 220);
    padding:0px;
    font-size:16px;
}
/* 预览中的图片 */
img{
    width:100%;
}
.markdown-div{
    background: #b4b4c0;
    margin:5px;
    padding:5px;
}
</style>